<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="applicable-device" content="pc">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="icon" href="/icon.png">
    <link rel="stylesheet" href="/static/index/css/reset.css">
    <link rel="stylesheet" href="/static/index/lib/bootstrap.css">
    <link rel="stylesheet" href="/static/index/css/common.css">
    <link rel="stylesheet" href="/static/index/css/home.css">
    <link rel="stylesheet" href="/static/index/css/users.css">
    <link rel="stylesheet" href="/static/index/css/page.css">
    <script src="/static/index/lib/jquery-2.1.4.js"></script>
    <script src="/static/index/lib/page.js"></script>
    <script type="text/javascript" src="/static/index/layer/layer.js"></script>
    <script type="text/javascript" src="/static/index/lib/template.js"></script>
    <style type="text/css">
        .pageTest{ height: 50px; margin-top: 50px;    }
        .activP{
          background-color: #367fa9!important;
          color: #fff!important;
        }
        .pick-show{border: none;}
    </style>
    <script>
            var _hmt = _hmt || [];
            (function() {
              var hm = document.createElement("script");
              hm.src = "https://hm.baidu.com/hm.js?8b340ebdd740974de9d621b14ab09b43";
              var s = document.getElementsByTagName("script")[0]; 
              s.parentNode.insertBefore(hm, s);
            })();
        </script>
</head>

<body>
    {include file="public/push"}
    {include file="public/usersHeader"}
    <div class="widthFullScreen">
        <div class="wdSafe user_body clearfix">
            {include file="public/usersLeftNav"}
            <!-- left over -->
            <div class="pull-right right_wrap">

                <div id="companyHtml"></div>
                <script id="companyScript" type="text/html">
                    <div class="user_comp_news userBottom">
                        <div class="row userSubHeader">
                            <div class="col-md-6 col-sm-6 clearfix">
                                <div class="logo_wrap pull-left verticalMiddle">
                                    <img src="{{logo}}" alt="" />
                                </div>
                                <div class="pull-left company_ren">
                                    <div class="company_name">{{company_name}}</div>
                                    <p class="company_stute">注册账号：{{account}}</p>
                                    <p class="company_stute">认证状态：<span class="colorRed">{{status}}</span></p>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 company_star">
                                <div class="star_num">服务评分：<span class="colorRed">{{star}}</span></div>
                                <div class="cust_num">已有<span class="colorRed">{{view_num}}人</span>查看并咨询</div>
                            </div>
                        </div>
                    </div>
                </script>

                <div class="nav_common">
                    <ol class="breadcrumb pull-left">
                        <li><a href="/users/index">用户中心</a></li>
                        <li><a href="/users/index">我的订单</a></li>
                        <li class="active">订单劵</li>
                    </ol>
                    <span class="pull-right orderSecurity">什么是<a href="/users/usersSecureDetal" class="colorRed">订单劵？</a></span>
                </div>

                <div id="inforHtml"></div>
                <script id="inforScript" type="text/html">
                    <p class="descript_secu">
                        当前可用的订单劵数量为
                        <span class="colorRed">{{balance}}</span>张，已使用
                        <span class="colorRed">{{used}}</span>张
                    </p>
                    <div class="comUser_wrap userBottom">
                        <div class="row main_bkbg">
                            <div class="col-md-3 col-sm-3">套餐名称</div>
                            <div class="col-md-3 col-sm-3">购买数量</div>
                            <div class="col-md-3 col-sm-3">未使用</div>
                            <div class="col-md-3 col-sm-3">购买时间</div>
                        </div>
                        {{each list item i}}
                            <div class="borderCounption">
                                <div class="row chart_total_li">
                                    <div class="col-md-3 col-sm-3">{{item.name}}</div>
                                    <div class="col-md-3 col-sm-3">{{item.amount}}张</div>
                                    <div class="col-md-3 col-sm-3">{{item.balance}}张</div>
                                    <div class="col-md-3 col-sm-3">{{item.create_time}}</div>
                                </div>
                            </div> 
                        {{/each}}
                    </div> 
                </script>
                <!-- 分页 -->
                <div class="pageTest"></div>
            </div>
            <!-- right over -->
        </div>
    </div>
    <div class="widthFullScreen heightGray"></div>
    {include file="public/footer"}
    <script>
        var baseUrl = 'https://api.qikuai100.com/',
            uid = localStorage.getItem("uid"),
            page = 1,
            totalPageNum = 1;
        $(function() {
            initCompany();
            initDate();
        });

         /**
         * 初始化公司信息
         */
        function initCompany() {
            $.ajax({
                type: "POST",
                url: baseUrl + "api/user/company",
                data: {
                    "uid": uid
                },
                success: function(result) {
                    console.log(result)
                    // return;
                    if (result.ret == 0) {
                        var dt = result.data;
                        dt.star = parseFloat(dt.star).toFixed(1);
                        
                        var companyHtml = template('companyScript', dt);
                        document.getElementById('companyHtml').innerHTML = companyHtml;

                    } else if(result.ret == -1){
                        layer.msg(result.res_info);
                        setTimeout(function(){
                            window.location.href = '/users/companyAutonym';
                        }, 1000);
                    }else{
                        layer.msg(result.res_info);
                    }
                }
            });
        };

        /**
         * 初始化数据
         */
        function initDate() {
            $.ajax({
                type: "POST",
                url: baseUrl + "api/policy/list",
                data: {
                    uid: uid,
                    page: page
                },
                success: function(result) {
                    if (result.ret == 0) {
                        console.log(result)
                        if(result.data.list.length == 0 || !result.data.list.length){
                            layer.msg("您还没有购买订单劵，快去购买吧！");
                        }
                        totalPageNum = result.data.pageNum;
                        var inforHtml = template('inforScript', result.data);
                        document.getElementById('inforHtml').innerHTML = inforHtml;

                    } else {
                        layer.msg(result.res_info);
                    }
                }
            });
        };
        /**
        *分页组件 *
         */
        $('.pageTest').page({
            leng: totalPageNum,//分页总数
            activeClass: 'activP' , //active 类样式定义
            clickBack:function(page){
                console.log(page);
                page = page;
                initDate();
            }
        });

    </script>
</body>

</html>